Size Change: +1.7 kB (0%)

Total Size: 1.17 MB

_{compressed-size-action}

I think in order to have it open by default we should not allow it to be closed — it should become a region that is always accessible.

In terms of a11y, I think we need to bring the "popover" behavior of the "inserter" to edit-widgets screen.
Unfortunately, if we do so, it means we won't be able to make the inserter open by default.

What I mean is having it open all the time in the same way the current widgets screen has widgets available on the page always visible. And remove the [+] toggle entirely.

What I mean is having it open all the time in the same way the current widgets screen has widgets available on the page always visible. And remove the [+] toggle entirely.

I'm hesitant on this, @mtias. Users will still be able to access the Settings sidebar for blocks too. Keeping the Inserter panel always open takes up a lot of space. Here's a quick mockup to visually convey what I'm talking about. And this is on a fairly wide screen (1278 x 800).

Design notes

• Added a "Widgets" heading in topbar.
• Removed the + Inserter

I don't think that's much of a problem but might be worth trying both. If it's not always open we should not have an "open by default" since it would also absorb focus and we don't want that on loading the page.

I think we're fine showing the Inserter by default. It mimics the behavior of the original widgets screen. I've put this flow together here: #24561 (comment)

It appears to work fine. The Inserter can collapse if needed to save space when opening the Inspector, or simply by clicking the + button in the topbar.

@mapk there are different implications here since the inserter has popover / modal behaviours. Meaning focus is transferred and contained, which cannot happen on first load of the page as it'd be confusing.

Could we just not capture focus on the first load in this specific inserter only?

I don't think so because as soon as you insert a single widget/block, it will close itself which is confusing IMO.

As @youknowriad mentions, the interaction model of the inserter as a toggle doesn't lend itself to open by default. The only way I can think of to make it open by default is to remove the toggle behaviour entirely.

Potentially it could be a setting "inserter always visible or not" in an "options" modal if there's a big need for it.

I updated this PR to:

1. Keep the inserter open by default.
2. Remove autoFocus on this specific screen only while ensuring the inserter won't close after a block is added.
3. Make sure that either inserter or sidebar are visible, but not both at the same time.

I didn't update it to use <PopoverWrapper> like it does in post editor, as a result it doesn't close when something else is focused and also it's not wrapped in <FocusManaged> component. Otherwise it works exactly the same. Does using it feel right? @mapk @mtias @youknowriad

If this direction seems right - let's figure out what's missing from this PR and how it could be better in terms of a11y / Gutenberg patterns.
If it doesn't, then what's the other route to try? I'm a bit lost in the discussion at this point :-)

Also, is this comment relevant to the always-open sidebar inserter inspired by the post editor? @youknowriad

In terms of a11y, I think we need to bring the "popover" behavior of the "inserter" to edit-widgets screen.
Unfortunately, if we do so, it means we won't be able to make the inserter open by default.

Thanks, @adamziel !

Make sure that either inserter or sidebar are visible, but not both at the same time.

This interaction should work as it does in the Post Editor now. Opening the Inspector should not close the Inserter unless there's not enough space to show both. I believe there are settings established there that can be adopted here.

Post Editor

Does using it feel right?

It started out right to me. I can tab "skip to content" to jump into the topbar. BUT I can't seem to keyboard my way into the Inserter blocks. If I hit Enter it closes the Inserter, and if I click any arrows or tabs, it jumps me to the next topbar icon.

This interaction should work as it does in the Post Editor now. Opening the Inspector should not close the Inserter unless there's not enough space to show both.

That makes sense, thank you! Fortunately it sounds like an easy change.

It started out right to me. I can tab "skip to content" to jump into the topbar. BUT I can't seem to keyboard my way into the Inserter blocks. If I hit Enter it closes the Inserter, and if I click any arrows or tabs, it jumps me to the next topbar icon.

Good notes, thank you! I wonder if that's part of what @youknowriad meant by the popover behavior.

I talked to @mapk, we compared this interaction to the post editor and the keyboard interaction is actually not trivial to solve with an inserter that doesn't act like a popover - what key should even transfer the focus to the inserter? Enter is for opening/closing. Tab is for navigating the toolbar. Down arrow wouldn't be consistent with other components. Ultimately that's a UX problem to solve, not a bug in the code. I'll defer to @mapk on what should we explore next here.

Because of the complexity, I'd rather we hold off creating a new Inserter interaction that differs from the post editor and move to not include it by default. As your other PR is improving, let's just get the Inserter to mimic the Inserter in the post editor. This way rather than going down a rabbit hole on the Inserter, we can focus on completing the Widget Editor.

This is how it used to work on the post editor screen but unfortunately, that's not acceptable as it's an a11y bug. See #24429 and #22858 for more details.

Because of the complexity, I'd rather we hold off creating a new Inserter interaction that differs from the post editor and move to not include it by default. As your other PR is improving, let's just get the Inserter to mimic the Inserter in the post editor.

I'd definitely agree the inserter interaction should be consistent everywhere. Our primary goal should be providing users with a predictable, expected, interaction across the WordPress UI.

Also, keeping the inserter open by default and removing the toggle entirely would force keyboard users to tab through the whole inserter to get to the content each time the use this page. This would make keyboard navigation inefficient. It would also be an assumption that the users flow is always "add" while they might just want to "edit" or "delete" an existing widget (and thus there's no need for the inserter at all).

Potentially it could be a setting "inserter always visible or not" in an "options" modal if there's a big need for it.

Interesting idea. What we're constantly learning with Gutenberg is that users have different needs or even just different preferences. Maybe it's worth reconsidering a bit the WordPress mantra "decisions not options" because a complex user interface needs to cover many different needs. To some extent, options can help. If in the future the need for some users to keep the inserter open will be clear, I wouldn't be opposed to a setting. It could also be a button within the inserter itself, something like "make the inserter sticky" (always open). Such a setting might be useful also in the block editor, for example with very large screens.

It seems like we're pivoting - let's close this PR.